<script setup lang="ts">
import IconCloseCircleOutlined from './icons/IconCloseCircleOutlined.vue'
import b1 from '@/assets/b1.mp4'

const visible = defineModel<boolean>('visible', { default: false })

function closeDialog() {
  visible.value = false
}
</script>

<template>
  <div
    v-if="visible"
    class="absolute top-0 left-0 z-50 w-screen h-screen flex justify-center items-center bg-black/45"
  >
    <div class="relative rounded w-4/5 h-full shadow-xl" role="dialog">
      <video class="w-full h-full object-cover rounded" :src="b1" autoplay loop></video>
      <div class="absolute top-0 left-0 right-0 bottom-0">
        <div class="flex justify-between p-4 pb-0">
          <span class="text-lg font-semibold text-white">中奖名单</span>
          <button class="text-lg text-black" @click.stop="closeDialog">
            <IconCloseCircleOutlined style="color: white" />
          </button>
        </div>

        <div class="h-full p-4 pb-8 overflow-y-auto relative">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>
